---
title: "Input"
description: "The Input component provides a consistent, accessible, and customizable way to capture user data across forms and interfaces, supporting labels, validation, and seamless integration with other UI elements."
order: 2
published: true
---

## Basic

A field specifically designed for entering numeric values.
<How minW60 toUse="forms/input/input-basic-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/input
```

## Manual installation
```bash
npm i react-aria-components
```

<SourceCode toShow='input'/>

## Anatomy
```
import { Input } from "@/components/ui/input";

<Input/>
```

## Input group
Sometimes you may want to add a prefix or suffix to an input, and the `InputGroup` makes this easy. If you place an icon inside the group, it works automatically. However, when using a Text component, you need to set the gutter depending on whether the text is on the left or the right. This step is important because otherwise the input will have incorrect padding and appear misaligned.

<How minW60 toUse="forms/input/input-group-demo" />

## Label and Description
Improve the usability of your input fields by adding labels and descriptions. Labels clearly indicate what type of input is expected, while descriptions provide extra guidance or context to help users complete the field accurately.

<How minW60 toUse="forms/input/input-label-description-demo" />

## Text Field
In the example above, a label is used, and you need to set the `id` to specify which input the label is associated with. When using a TextField, this is handled automatically for you. There is no need to add extra classes either, since the styling and accessibility setup are already built in.

<How minW60 toUse="forms/input/input-text-field-demo" />

You can learn more in the [TextField documentation](/docs/components/forms/text-field).

## Controlled
You can use the input as a controlled component by managing its state externally.
<How minW60 toUse="forms/input/input-controlled-demo" />
